<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui_User_查询</title>
    <!--    首先引入layui外部样式-->
    <link href="./layui/css/layui.css" rel="stylesheet">
</head>

<script type="text/html" id="toolEventDemo">
    <a class="layui-btn layui-btn-xs" style="background-color: #1E9FFF" lay-event="edit"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon">&#xe640;</i>删除</a>
</script>



<body>
<!--引入layui的js   ./代表的是当前目录下面-->
<script type="text/javascript" src="./layui/layui.js"></script>
<!--自己js的路径-->
<script type="text/javascript" src="./js/user.js"></script>

<!--表格元素 lay-filter 通过这个属性来筛选绑定的表格-->
<table id="mytable" lay-filter="mytable"></table>

<!--上方工具条-->
<!--lay-event 是跟js的Switch case 后的名字一样的-->
<script type="text/html" id="userToolBar">
    <div style="float:right">
        <button class="layui-btn layui-btn-normal layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon">&#xe654;</i>添加数据
        </button>
        <button class="layui-btn layui-btn-primary layui-btn layui-btn-sm" lay-event="deleteAll" style="color: #FF0000">
            <i class="layui-icon">&#xe640;</i>批量删除
        </button>
    </div>


    <!--  form表单  -->
    <!--   采用用户的名字来进行模糊查询-->
    <form class="layui-form layui-col-space5">
        <!--   采用用户的姓名和id来进行模糊查询-->
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label layui-bg-gray" style="width: 110px;text-align: center">用户姓名</label>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <input class="layui-input" autocomplete="off" placeholder="请输入用户姓名" name="username" id="username">
        </div>

        <div class="layui-inline layui-show-xs-block">
        <label class="layui-form-label layui-bg-gray" style="width: 110px;text-align: center">用户ID</label>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <input class="layui-input" autocomplete="off" placeholder="请输入用户ID" name="userid" id="userid">
        </div>

<!--        选择日期，没有写底层，只是写了日期框的组件-->
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label layui-bg-gray" style="width: 110px;text-align: center">日期</label>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <input autocomplete="off" class="layui-input dateStr" lay-verify="date" name="dateStr"
                   placeholder="yyyy-MM-dd" type="text">
        </div>



        <!-- 模糊查询的按钮  -->
        <!-- type="button 这个是为了不让layui提交两次-->
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-event="search"
                    lay-filter="sreach" type="button"><i class="layui-icon">&#xe615;</i>搜索
            </button>
        </div>
    </form>
</script>

<!--限制新增用户的时候用户输入的年龄 最小为1 最大为100岁 ：加了约束-->
<script type="text/javascript">
    function minmax(value, min, max)
    {
        if(parseInt(value) < min || isNaN(parseInt(value)))
            return min;
        else if(parseInt(value) > max)
            return max;
        else return value;
    }
</script>



<!--新增用户的窗口网页，删除，修改，一个模块就一个新的窗口网页好些，不需要通用-->
<div id="addWorkUser" style="width:100%;display: none">
    <form id="addForm" class="layui-form layui-form-pane" style="display: inline-block" action="">
        <div class="layui-form-item">
            <label class="layui-form-label layui-bg-gray">用户姓名</label>
            <div class="layui-input-inline">
                <!-- lay-verify  表单验证 required 必填-->
                <input type="text" name="username" lay-verify="required|username"
                       placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label  layui-bg-gray">用户性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="usersex" value="男" title="男" placeholder="请选择性别" checked>
                <input type="radio" name="usersex" value="女" title="女" placeholder="请选择性别">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  layui-bg-gray">用户年龄</label>
            <div class="layui-input-inline">
                <!-- lay-verify  表单验证 required 必填-->
                <input type="text" name="userage" lay-verify="required"
                       placeholder="请输入用户年龄" autocomplete="off" class="layui-input" onkeyup="this.value = minmax(this.value, 0, 100)">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  layui-bg-gray">用户地址</label>
            <div class="layui-input-inline">
<!--                文本域填地址-->
                <textarea name="useraddress" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>


        <div class="layui-form-item" style="width:80%;margin-left: 10%; position: relative;left: 280px">
            <button class="layui-btn"  style="background-color: #1E9FFF" lay-submit="" lay-filter="addWorkUser" >
                <i class="layui-icon">&#x1005;</i>添加
            </button>
            <button class="layui-btn layui-btn-primary" type="button" style="color: #FF0000">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>



<!--修改用户的窗口网页，删除，修改，一个模块就一个新的窗口网页好些，不需要通用-->
<div id="updateWorkUser" style="width:100%;display: none">
    <form id="updateForm" class="layui-form layui-form-pane" lay-filter="myFrom2" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <!-- lay-verify  表单验证 required 必填-->
                <input type="text" name="userid" lay-verify="required" readonly
                       placeholder="请输入用户ID" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户姓名</label>
            <div class="layui-input-inline">
                <!-- lay-verify  表单验证 required 必填-->
                <input type="text" name="username" lay-verify="required|username"
                       placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户性别</label>
            <div class="layui-input-inline">
                <!-- lay-verify  表单验证 required 必填-->
                <input type="radio" name="usersex" value="男" title="男" placeholder="请选择性别" required>
                <input type="radio" name="usersex" value="女" title="女" placeholder="请选择性别" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户年龄</label>
            <div class="layui-input-inline">
                <!-- lay-verify  表单验证 required 必填-->
                <input type="text" name="userage" lay-verify="required"
                       placeholder="请输入用户年龄" autocomplete="off" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户地址</label>
            <div class="layui-input-inline">
                <!--                文本域填地址-->
                <textarea name="useraddress" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>


        <div class="layui-form-item" style="width:80%;margin-left: 10%;text-align: center">
            <!--            lay-filter="updateSysUser" 这里跟js里form.on submit()里的名字一样-->
            <button class="layui-btn" style="background-color: #1E9FFF" lay-submit="" lay-filter="updateWorkUser" >
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-btn-primary" type="button" style="color: #FF0000">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>


</body>
</html>